<template>
  <div class="history-container">
    <h2 class="history-title">历史分析记录</h2>
    <table class="history-table">
      <thead>
        <tr>
          <th class="small-col">视频名</th>
          <th class="small-col">分析时间</th>
          <th class="video-col">分析后视频</th>
          <th>行为分析饼状图</th>
          <th>行为分析雷达图</th>
          <th>行为分析条形图</th>
        </tr>
      </thead>
      <tbody v-if="history.length > 0">
        <tr v-for="item in history" :key="item.id">
          <td class="small-col">{{ item.video_name }}</td>
          <td class="small-col">{{ item.created_at }}</td>
          <td class="video-col">
            <div class="video-wrapper">
              <video
                v-if="item.analyzed_video_path"
                :src="item.analyzed_video_path"
                class="history-video"
                controls
                preload="metadata"
              ></video>
            </div>
          </td>
          <td>
            <img
              v-if="item.bar_img_path"
              :src="item.bar_img_path"
              class="history-img"
              alt="条形图"
              @click="showImg(item.bar_img_path)"
            />
          </td>
          <td>
            <img
              v-if="item.pie_img_path"
              :src="item.pie_img_path"
              class="history-img"
              alt="饼图"
              @click="showImg(item.pie_img_path)"
            />
          </td>
          <td>
            <img
              v-if="item.visualize_img_path"
              :src="item.visualize_img_path"
              class="history-img"
              alt="可视化"
              @click="showImg(item.visualize_img_path)"
            />
          </td>
        </tr>
      </tbody>
      <tbody v-else>
        <tr>
          <td colspan="6">暂无历史记录</td>
        </tr>
      </tbody>
    </table>
    <div v-if="dialogImg" class="img-dialog" @click="dialogImg = ''">
      <img :src="dialogImg" class="big-img" />
    </div>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  name: 'HistoryPanel',
  data() {
    return {
      history: [],
      dialogImg: ''
    }
  },
  mounted() {
    this.fetchHistory();
  },
  methods: {
    fetchHistory() {
      const account = localStorage.getItem('account');
      if (!account) {
        this.history = [];
        return;
      }
      axios.get('/api/get-history/' + account)
        .then(res => {
          this.history = res.data.history || [];
        });
    },
    showImg(src) {
      this.dialogImg = src;
    }
  },
  watch: {
    // 监听路由变化或账号变化，重新拉取数据
    '$route'() {
      this.fetchHistory();
    }
  }
}
</script>

<style scoped>
.history-container {
  max-width: 1200px;
  margin: 30px auto;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 8px #e0e0e0;
  padding: 30px 20px;
}
.history-title {
  text-align: center;
  margin-bottom: 25px;
  color: #2a3b4d;
  font-weight: bold;
  font-size: 26px;
  letter-spacing: 2px;
}
.history-table {
  width: 100%;
  border-collapse: collapse;
  background: #f8fafc;
  table-layout: fixed;
}
.history-table th,
.history-table td {
  border: 1px solid #e3e6ea;
  padding: 10px 6px;
  text-align: center;
  font-size: 15px;
  vertical-align: middle;
}
.history-table th {
  background: #e3f0fa;
  color: #1a2b3c;
  font-weight: 600;
}
.small-col {
  width: 120px;
  max-width: 140px;
  word-break: break-all;
  font-size: 13px;
  padding: 6px 4px;
}
.video-col {
  width: 260px;
  max-width: 300px;
}
.video-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.history-video {
  width: 220px;
  height: 140px;
  border-radius: 8px;
  background: #f4f8fb;
  border: 1px solid #e3e6ea;
  cursor: pointer;
  object-fit: cover;
  transition: box-shadow 0.2s;
}
.history-img {
  width: 80px;
  height: 60px;
  object-fit: contain;
  border-radius: 6px;
  border: 1px solid #e3e6ea;
  background: #f4f8fb;
  cursor: pointer;
  transition: box-shadow 0.2s;
}
.history-img:hover {
  box-shadow: 0 0 8px #1976d2;
}
.img-dialog {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.big-img {
  max-width: 80vw;
  max-height: 80vh;
  border-radius: 10px;
  box-shadow: 0 0 20px #222;
  background: #fff;
}
</style>